<template>
	<scroll-view class="page b-bg haveBar" id="scrollWrap" scroll-y="true" :scroll-top="scrollTop" @scrolltolower="scrolltolower" lower-threshold="50" @scroll="scroll">
		<view class="userBox">
			<view class="logoBox" @tap='goIndex'>
				<image src="../../static/img/logo.png" mode="" class="logo"></image>
			</view>
			<user></user>
		</view>
		<banner :banner_image="banner_image"></banner>
		<view class="blockTab" :class="{fix:scorllUi.cri}">
			<tab current="3" :scrollLeft='tabLeft' :goId='goId'></tab>
		</view>
		<view class="blockIn" v-show="scorllUi.cri">
			
		</view>
		<view class="block work-works">
			<view class="work-works-inner">
				<fil :active_id="goId" @render="render"></fil>
				<view class="items">
					<view class="item-rank" v-for="(item,index) in list" :key="index" @tap="goDetail(item.id)">
						<view class="order">
							 <image src="../../static/img/one.png" mode="" class="jiangpai" v-show="index == 0"></image>
							 <image src="../../static/img/two.png" mode="" class="jiangpai" v-show="index == 1"></image>
							  <image src="../../static/img/three.png" mode="" class="jiangpai" v-show="index == 2"></image>
							  <text v-show="index > 2">{{(page.page - 1) * 8 + index + 1}}</text>
						</view>
						<view class="imgBox" :style="{ backgroundImage: `url(${$ft.getCover(item.file_list)})`}">
							<text class="iconfont icon-aixin" v-show="item.is_collect" @tap.stop="uncollect(item)"></text>
							<text class="iconfont icon-a-aixin1" v-show="!item.is_collect" @tap.stop="collect(item)"></text>
						</view>
						<view class="info">
							<view class="in-title">
								{{item.title}} 
							</view>
							<view class="in-f-title">
								{{item.total_vote}}票
							</view>
							<view class="in-f-title">
								<view class="bt" @tap.stop='showShare'>
									分享
								</view>
								<view class="bt bt-a" @tap.stop="envetTp(item)" v-if="is_vote_btn === 1">
									<text v-show="item.is_vote">已投票 </text>
									<text v-show="!item.is_vote">投票 </text>
								</view>
							</view>
						</view>
					</view>
					<view class="more-bottom">
						<text v-show="!page.is_bottom">加载中...</text>
						<text v-show="page.is_bottom">没有更多了></text>
					</view>
				</view>
			</view>
		</view>
	<!-- 	<barCon ref='barCon'></barCon> -->
		<barCon :is_up="is_up" ref='barCon'></barCon>
		<share ref="showS"></share>
	</scroll-view>
	
</template>

<script>
	import mixin from '@/util/mixin.js';
	export default {
		mixins:[mixin],
		data() {
			return {
				form_data:{
					city_id:"",
					county_id:"",
					role_id: "",
				},
				page:{
					is_bottom:false,
					page:1
				},
				scorllUi:{
					height:"",
					cri:false
				},
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				dec:{},
				banner_image:'',
				is_up:'',
				tabLeft:0,
				goId:"",
				vote_num:5,
				list:[]
			};
		},
		created(){
			this.tabLeft = 50 / 750 * window.innerWidth;
		},
		onLoad(options) {
			this.goId = options.id;
			console.log(this.goId);
			this.scorllUi.height = 500 / 750 * window.innerWidth;
			this.render(null);
			this.getdec();
		},
		methods:{
			async getdec() {
				//console.log('运行');
				const res = await this.$httpPub({
					  url: 'activity/'+ this.goId,
					  method:'get',
					  data:{}
				})
			   this.dec = res;
			   console.log(this.dec);
			   this.banner_image = this.dec.banner_image;
			   this.is_up = this.dec.is_upload_btn;
			},
			async collect(item) {
				console.log(item);
				const res = await this.$http({
					  url:'user/collect',
					  method:'post',
					  data:{
						  id:item.id
					  }
				})
				if(res) {
					item.collect_id = res.id;
					item.is_collect = 1;
					this.toast('收藏成功')
				}
			},
			async uncollect(item) {
				console.log(item);
				const res = await this.$http({
					  url:'user/collect',
					  method:'post',
					  data:{
						  collect_id:item.collect_id
					  }
				})
				
				if(res) {
					item.collect_id = 0;
					item.is_collect = 0; 
					this.toast('取消成功')
				}
				return false;
			},
			async render(res) {
				if(res) {
					this.list = [];
					this.form_data = res;
					this.page = {
						is_bottom:false,
						page:1
					}
				} 
				if(!this.page.is_bottom) {
					let postData = {
						page:this.page.page,
						page_count:8,
						...this.form_data
					}
					const res = await this.$http({
						  url:'article/vote-top/' + this.goId,
						  method:'get',
						  data:postData
					})
					this.is_vote_btn = res.is_vote_btn;
					this.vote_num = res.vote_remainder_num;
					this.list.push(...res.data);
					console.log(this.list);
					if(res.current_page == res.last_page) {
						this.page.is_bottom = true;
					} else {
						this.page.page ++;
					}
				}
			},
			showShare() {
				this.showShareEvent();
			},
			showShareEvent() {
				this.$refs.showS.show();
			},
			envetTp(item){
				if(this.vote_num === 0) {
					this.toast("今日投票次数已用完");
					return;
				}
				console.log(item);
				const _this = this;
				uni.showModal({
					title: '提示',
					content: '您今天还有'+ _this.vote_num +'次投票机会是否确定投票',
					success: async(res) => {
						if (res.confirm) {
							const res = await this.$http({
								url:"user/vote",
								method:'post',
								data:{
									id:item.id
								}
							})
							if(res.residue_num) {
								_this.vote_num = res.residue_num;
								item.total_vote ++;
								item.is_vote = true;
								_this.toast('投票成功')
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				// const res = await this.$http({
				// 	url:'user/vote',
				// 	medthod:'post',
				// 	id:id
				// })
				// console.log(id);
			},
			scrolltolower() {
				this.render(null);
			},
			scroll(e){
				this.old.scrollTop = e.detail.scrollTop;
				// console.log(this.old.scrollTop);
				// console.log(this.old.scrollTop);
				// console.log(this.scorllUi);
				if(this.old.scrollTop > this.scorllUi.height) {
					this.scorllUi.cri = true;
				} else {
					this.scorllUi.cri = false;
				}
			}
		}
	}
</script>

<style lang="scss">
	#scrollWrap {
		width: 100%;
		height: 100%;
	}
   .page {
   		.add-form {
   			padding: 0;
   		}
   	}
	.jiangpai {
		width: 46rpx;
		height: 52rpx;
	}
   .block {
   	  width: 100%;
   	  padding: 0rpx 34rpx 40rpx;
   }
   .work-infoBox {
	       // padding-bottom: 0;
	   .work-inner {
		   background-color: #fff;
		   padding: 28rpx;
		   padding-bottom: 7rpx;
		   border-radius: $border-radius;
		   .img-title {
			   width: 281rpx;
			   height: 66rpx;
		   }
		   .work-cont {
			   font-size: 28rpx;
			   line-height: 1.6;
			   .p {
				   margin-bottom: 20rpx;
			   }
		   }
	   }
   }
   .work-works {
	    padding-top: 10rpx;
	  .work-works-inner {
		  background-color: #fff;
		  padding: 30rpx 20rpx;
		  border-radius: $border-radius;
		  min-height: 800rpx;
	  }
	  .items {
		  padding-top: 26rpx;
	  	  .item-rank {
			  display: flex;
			  justify-content: space-around;
			  margin-bottom: 20rpx;
			  .order {
				  width: 46rpx;
				  @include center();
			  }
			  .imgBox {
				  width: 300rpx;
				  height: 200rpx;
				  border-radius: 16rpx;
				  position: relative;
				  .iconfont {
					  position: absolute;
					  right:20rpx;
					  top:20rpx;
					  color:#f24545;
					  font-size: 52rpx;
				  }
			  }
			  .info {
				  width: 256rpx;
				  .in-title {
					  height: 80rpx;
					  font-size: 30rpx;
					  font-weight: 550;
					  @include textTwo();
				  }
				  .in-f-title {
					  display: flex;
					  padding-top: 10rpx;
					  .bt {
						  background-color: #ffad4c;
						  color:#fff;
						  padding: 6rpx 18rpx;
						  font-size: 28rpx;
						  border-radius: 10rpx;
						  margin-right: 20rpx;
						  &.bt-a {
							  background-color: #f24545;
							  color:#fff;
						  }
						  &.disable {
							  background-color: #f5dede;
							  color:#fff;
						  }
					  }
				  }
			  }
		  }
	  }
   }
</style>
